<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta content="email=no" name="format-detection"/>
    <title>爱趣分享</title>
    <style>
        html {
            font-size: 12px
        }

        @media screen and (min-width: 321px) and (max-width: 375px) {
            html {
                font-size: 12px
            }
        }

        @media screen and (min-width: 376px) and (max-width: 414px) {
            html {
                font-size: 12px
            }
        }

        @media screen and (min-width: 415px) and (max-width: 639px) {
            html {
                font-size: 15px
            }
        }

        @media screen and (min-width: 640px) and (max-width: 719px) {
            html {
                font-size: 20px
            }
        }

        @media screen and (min-width: 720px) and (max-width: 749px) {
            html {
                font-size: 22.5px
            }
        }

        @media screen and (min-width: 750px) and (max-width: 799px) {
            html {
                font-size: 23.5px
            }
        }

        @media screen and (min-width: 800px) {
            html {
                font-size: 25px
            }
        }
        * {
            margin: 0;
            padding: 0;
        }

        .img {
            line-height: 0;
        }

        .img img {
            width: 100%;
        }

        .main {
            position: relative;
        }

        .input-wrapper {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-flow: column;
            -ms-flex-flow: column;
            flex-flow: column;
        }

        .input-wrapper p {
            -webkit-flex: 1;
            -moz-flex: 1;
            flex: 1;
            padding: 0 3%;
        }

        input {
            line-height: 3.6rem;
            border: 2px solid #000;
            text-align: center;
            width: 100%;
            outline: 0;
            font-size: 1.4rem;
        }

        .code {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;

        }

        .input-wrapper .code .code-input {
            -webkit-flex: 1;
            -moz-flex: 1;
            flex: 1;
            padding-right: 2rem;
        }

        .input-wrapper .code img {
            width: auto;
            height: 3.6rem;
        }

        .input-wrapper button {
            border: 0;
            background: transparent;
        }

        .code .img {
            position: relative;
        }

        .code .img button {
            position: absolute;
            width: 100%;
            line-height: 3.6rem;
            top: -0.2rem;
            font-size: 1.4rem;
            left: 0;
        }

        em {
            font-style: normal;
        }

        .input-error {
            color: red;
        }

        i.error {
            display: inline-block;
            font-style: normal;
            margin-top: 0.2rem;
            line-height: 1rem;
            opacity: 0;
        }

        .input-error .error {
            opacity: 1;
        }

        button {
            outline: 0;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="img">
        <img src="__PUBLIC__/share/img/bg1.jpg">
    </div>
    <div class="img main">
        <img src="__PUBLIC__/share/img/bg2.jpg">
        <div class="input-wrapper">
            <p class="phone ">
                <input type="tel" placeholder="请输入手机号码" id="phonenumber">
                <i class="error">*请输入正确的手机号码</i>
            </p>
            <p class="code">
                <span class="code-input">
                    <input type="text" placeholder="输入验证码" id="code">
                    <i class="error">*请输入验证码</i>
                </span>

                <span class="img">
                    <img src="__PUBLIC__/share/img/btn_send.png">
                     <button onclick="getVerify()" id="sendVerify" status="1">发送验证码</button>
                </span>
            </p>
            <p>
                <button onclick="submit()">
                    <img src="__PUBLIC__/share/img/btn_sub.png">
                </button>
            </p>
        </div>
    </div>
    <div class="img">
        <img src="__PUBLIC__/share/img/bg3_01.jpg">
    </div>
    <div class="img">
        <a href="#"><img src="__PUBLIC__/share/img/bg3_02.jpg"></a>
    </div>
    <div class="img">
        <img src="__PUBLIC__/share/img/bg4.jpg">
    </div>
</div>
<script src="__PUBLIC__/share/js/zepto.js"></script>
<script>
    function getVerify() {
        var re = phoneVerify();
        if (re) {

            //发送验证码成功后
            var sendVerify = document.getElementById('sendVerify');
            var status = $('#sendVerify').attr('status');
            $('#sendVerify').attr('status', '0');
            if (status != 1) {
                return;
            }
            $('#sendVerify').removeAttr('onclick');
            $('#sendVerify').html('<span class="GetVerify"><em id="GetVerify">120</em>S</span>');
            times = 119;
            isinerval = setInterval("CountDown()", 1000);
        } else {
        }
    }
    function CountDown() {
        if (times < 1) {
            $('#sendVerify').attr('onclick', 'getVerify()');
            $('#sendVerify').attr('status', '1');
            $('#sendVerify').html('重新获取');
            clearInterval(isinerval);
            return;
        }
        $('#GetVerify').html('' + times + '');
        times--;
    }
    $('#phonenumber').blur(function () {
        phoneVerify();
    });
    var phoneVerify = function () {
        var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
        var r = $('#phonenumber').val().match(reg);
        if (r == null) {
            $('#phonenumber').parent().addClass('input-error');
            return false;
        } else {
            $('#phonenumber').parent().removeClass('input-error');
            return true;
        }
    };
    $('#code').blur(function () {
        codeVerify();
    });
    var codeVerify = function () {
        if (!$('#code').val() || $('#code').val().length <= 3) {
            $('#code').parent().addClass('input-error');
            return false;
        } else {
            $('#code').parent().removeClass('input-error');
            return true;
        }
    };
    function submit() {
        var phoneStatue = phoneVerify($(''));
        var codeStatus = codeVerify();
        if (phoneStatue && codeStatus) {
            //注册
            window.location.href = "#";
        }
    }
</script>
</body>
</html>